<template>

  <div class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50 flex">
    <!-- 左侧介绍区域 -->
    <div class="flex-1 flex flex-col justify-center px-16 py-12">
      <!-- 主标题 -->
      <div class="mb-12">
        <h1 class="text-5xl font-bold text-gray-900 mb-4 leading-tight">
          <span class="text-blue-600">AI智慧教室</span>
          <br>
          <span class="text-3xl text-gray-700">让学习更智能，让成长更精彩</span>
        </h1>
      </div>

      <!-- 功能介绍板块 -->
      <div class="space-y-10">
        <!-- 板块1：专属AI教室 -->
        <div class="flex items-start space-x-6 group">
          <div class="flex-shrink-0 w-16 h-16 bg-gradient-to-r from-blue-500 to-blue-600 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
            <i class="fas fa-graduation-cap text-2xl text-white"></i>
          </div>
          <div class="flex-1">
            <h3 class="text-2xl font-semibold text-gray-900 mb-3">小朋友们的专属AI教室与学习伙伴</h3>
            <p class="text-lg text-gray-600 leading-relaxed">
              为每个孩子量身定制的智能学习环境，AI助手24小时在线，陪伴学习路上的每一步成长，
              让知识获取变得生动有趣，让学习成为一种享受。
            </p>
          </div>
        </div>

        <!-- 板块2：聚合顶尖模型 + AI专家模型 -->
        <div class="flex items-start space-x-6 group">
          <div class="flex-shrink-0 w-16 h-16 bg-gradient-to-r from-purple-500 to-purple-600 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
            <i class="fas fa-brain text-2xl text-white"></i>
          </div>
          <div class="flex-1">
            <h3 class="text-2xl font-semibold text-gray-900 mb-3">一站式聚合全球顶尖AI大模型</h3>
            <p class="text-lg text-gray-600 leading-relaxed mb-6">
              集成GPT-4、Claude、DeepSeek等全球顶级AI模型，为教学注入无限动力。
              不同模型的智慧碰撞，为每个学习问题提供最佳解决方案。
            </p>
            
            <!-- AI专家模型展示 -->
            <div class="grid grid-cols-2 gap-4">
              <div class="bg-white/60 backdrop-blur-sm rounded-xl p-4 border border-gray-200">
                <div class="flex items-center mb-2">
                  <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
                    <i class="fas fa-robot text-blue-600 text-sm"></i>
                  </div>
                  <span class="font-semibold text-gray-800">GPT-4</span>
                </div>
                <p class="text-sm text-gray-600">创意写作与逻辑思维训练专家</p>
              </div>
              <div class="bg-white/60 backdrop-blur-sm rounded-xl p-4 border border-gray-200">
                <div class="flex items-center mb-2">
                  <div class="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center mr-3">
                    <i class="fas fa-lightbulb text-purple-600 text-sm"></i>
                  </div>
                  <span class="font-semibold text-gray-800">Claude</span>
                </div>
                <p class="text-sm text-gray-600">数学推理与科学探索导师</p>
              </div>
              <div class="bg-white/60 backdrop-blur-sm rounded-xl p-4 border border-gray-200">
                <div class="flex items-center mb-2">
                  <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mr-3">
                    <i class="fas fa-code text-green-600 text-sm"></i>
                  </div>
                  <span class="font-semibold text-gray-800">DeepSeek</span>
                </div>
                <p class="text-sm text-gray-600">编程启蒙与技术思维培养</p>
              </div>
              <div class="bg-white/60 backdrop-blur-sm rounded-xl p-4 border border-gray-200">
                <div class="flex items-center mb-2">
                  <div class="w-8 h-8 bg-orange-100 rounded-lg flex items-center justify-center mr-3">
                    <i class="fas fa-language text-orange-600 text-sm"></i>
                  </div>
                  <span class="font-semibold text-gray-800">Kimi</span>
                </div>
                <p class="text-sm text-gray-600">中文学习与传统文化传承</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 板块3：魔法时刻演示 -->
        <div class="flex items-start space-x-6 group">
          <div class="flex-shrink-0 w-16 h-16 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
            <i class="fas fa-magic text-2xl text-white"></i>
          </div>
          <div class="flex-1">
            <h3 class="text-2xl font-semibold text-gray-900 mb-3">魔法时刻演示</h3>
            <div class="bg-white/60 backdrop-blur-sm rounded-xl p-6 border border-gray-200">
              <div class="flex items-center justify-between mb-4">
                <div class="flex items-center space-x-3">
                  <div class="w-3 h-3 bg-red-400 rounded-full"></div>
                  <div class="w-3 h-3 bg-yellow-400 rounded-full"></div>
                  <div class="w-3 h-3 bg-green-400 rounded-full"></div>
                </div>
                <span class="text-sm text-gray-500 font-mono">AI教室演示</span>
              </div>
              <div class="space-y-3 text-sm">
                <div class="flex items-center space-x-3">
                  <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
                    <span class="text-blue-600 text-xs">小明</span>
                  </div>
                  <div class="bg-gray-100 rounded-lg px-4 py-2 max-w-xs">
                    <p class="text-gray-700">老师，这道数学题怎么做？</p>
                  </div>
                </div>
                <div class="flex items-center space-x-3 justify-end">
                  <div class="bg-blue-500 text-white rounded-lg px-4 py-2 max-w-xs">
                    <p>让我来帮你分析这道题...</p>
                  </div>
                  <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
                    <i class="fas fa-robot text-white text-xs"></i>
                  </div>
                </div>
                <div class="text-center">
                  <div class="inline-flex items-center space-x-2 text-blue-600">
                    <i class="fas fa-spinner fa-spin"></i>
                    <span class="text-xs">AI正在思考中...</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧登录区域 -->
    <div class="w-96 bg-white shadow-2xl flex flex-col justify-center px-12 py-16">
      <div class="w-full">
        <!-- Logo -->
        <div class="text-center mb-8">
          <div class="w-20 h-20 bg-gradient-to-r from-blue-500 to-purple-600 rounded-2xl mx-auto mb-4 flex items-center justify-center">
            <i class="fas fa-graduation-cap text-3xl text-white"></i>
          </div>
          <h2 class="text-2xl font-bold text-gray-900">欢迎回来</h2>
          <p class="text-gray-600 mt-2">登录AI智慧教室，开启学习之旅</p>
        </div>

        <!-- 登录表单 -->
        <form @submit.prevent="handleLogin" class="space-y-6">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">用户名/邮箱</label>
            <input
              v-model="loginForm.username"
              type="text"
              required
              class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
              placeholder="请输入用户名或邮箱"
            >
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">密码</label>
            <div class="relative">
              <input
                v-model="loginForm.password"
                :type="showPassword ? 'text' : 'password'"
                required
                class="w-full px-4 py-3 pr-12 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
                placeholder="请输入密码"
              >
              <button
                type="button"
                @click="showPassword = !showPassword"
                class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
              >
                <i :class="showPassword ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
              </button>
            </div>
          </div>

          <div class="flex items-center justify-between">
            <label class="flex items-center">
              <input
                v-model="loginForm.remember"
                type="checkbox"
                class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
              >
              <span class="ml-2 text-sm text-gray-600">记住我</span>
            </label>
            <a href="#" class="text-sm text-blue-600 hover:text-blue-800">忘记密码？</a>
          </div>

          <button
            type="submit"
            :disabled="isLoading"
            class="w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white py-3 rounded-xl font-semibold hover:from-blue-600 hover:to-purple-700 focus:ring-4 focus:ring-blue-200 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <span v-if="isLoading" class="flex items-center justify-center">
              <i class="fas fa-spinner fa-spin mr-2"></i>
              登录中...
            </span>
            <span v-else>立即登录</span>
          </button>
        </form>

        <!-- 注册链接 -->
        <div class="text-center mt-8">
          <p class="text-gray-600">
            还没有账号？
            <a href="#" class="text-blue-600 hover:text-blue-800 font-semibold">立即注册</a>
          </p>
        </div>

        <!-- 第三方登录 -->
        <div class="mt-8">
          <div class="relative">
            <div class="absolute inset-0 flex items-center">
              <div class="w-full border-t border-gray-300"></div>
            </div>
            <div class="relative flex justify-center text-sm">
              <span class="px-4 bg-white text-gray-500">或者使用以下方式登录</span>
            </div>
          </div>
          
          <div class="mt-6 grid grid-cols-2 gap-3">
            <button class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-xl bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 transition-colors">
              <i class="fab fa-wechat text-green-500 mr-2"></i>
              微信登录
            </button>
            <button class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-xl bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 transition-colors">
              <i class="fab fa-qq text-blue-500 mr-2"></i>
              QQ登录
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()

// 表单数据
const loginForm = ref({
  username: '',
  password: '',
  remember: false
})

// 状态管理
const showPassword = ref(false)
const isLoading = ref(false)

// 登录处理
const handleLogin = async () => {
  isLoading.value = true
  
  try {
    // 模拟登录请求
    await new Promise(resolve => setTimeout(resolve, 1500))
    
    // 这里添加实际的登录逻辑
    console.log('登录信息:', loginForm.value)
    
    ElMessage.success('登录成功！')
    
    // 跳转到首页
    router.push('/')
  } catch (error) {
    ElMessage.error('登录失败，请检查用户名和密码')
  } finally {
    isLoading.value = false
  }
}
</script>

<style scoped>
/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 动画效果 */
.group:hover .group-hover\:scale-110 {
  transform: scale(1.1);
}
</style>
